<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>续费管理</title>
	<link rel="stylesheet" href="../css/common2.css">
	<link rel="stylesheet" href="../css/urlty.css">
	<link rel="stylesheet" href="/scriptZIP/vue-select.min.css">
	<style>
		.state {
			color: white;
			border-radius: 3px;
			font-size: 14px;
			font-weight: bold;
			padding: 4px;
			background-color: #4BAF4F;
		}

		.conduct {
			background-color: #F8B551;
		}

		.end {
			background-color: #E64919;
		}

		.class-end {
			background-color: #9F9F9F;
		}

		#vue-root {
			padding-top: 20px;
		}

		.search_img1 {
			position: absolute;

		}

		.search1 {
			width: 15vw;
			max-width: 140px;
			height: 35px;
			padding-left: 10px;
			font-size: 14px;
			color: #686868;
			/* position: absolute; */
			right: 100px;
			border: 1px solid;
			display: inline-block;
		}


		input {
			padding-left: 5px;
		}

		.reason {
			width: 240px;
			float: left;
			margin-left: 200px;
			margin-top: -40px;
			position: absolute;
			height: 40px;
			font-size: 16px;
			line-height: 40px;
		}

		.orderXx_popup {
			position: fixed;
			left: 0px;
			top: 0px;
			width: 100%;
			height: 100%;
			z-index: 999999999;
			background-color: rgba(62, 62, 62, 0.5);
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.popup_box {
			color: black;
			width: 400px;
			height: 300px;
			background-color: white;
			border-radius: 12px;
		}

		.popup_box_title {
			height: 50px;
			line-height: 50px;
			font-size: 24px;
			position: relative;
			text-align: center;
			border-bottom: solid 1px #5c5c5c;
		}

		.popup_box_input {
			padding: 60px 0px 0px 37px;
			font-size: 16px;
			height: 120px;
		}

		.popup_box_input input {
			width: 232px;
			line-height: 27px;
			border-bottom: 1px solid #7a7a7a;
		}

	
		.popup_box_btn_box {
			display: flex;
			justify-content: space-around;
		}

		.popup_box_btn {
			padding: 2px 0;
			width: 100px;
			text-align: center;
			color: white;
			border-radius: 4px;
			background-color: #5dbeff;
		}

		.popup_box_btn2 {
			color: #2c2c2c;
			background-color: #b9b9b9;
		}

		.popup_box_content {
			height: 190px;
		}


		.popup_box_check {
			display: flex;
			align-items: center;
			padding: 20px 20px 10px 30px;
			box-sizing: border-box;
			font-size: 16px;
		}

		.popup_box_reject_reason {
			margin-top: 10px;
			padding: 0 30px;
			box-sizing: border-box;
			font-size: 14px;
		}

		.popup_box_reject_reason label {
			display: block;
			font-weight: bold;
			margin-bottom: 5px;
		}

		.popup_box_reject_reason textarea {
			width: 100%;
			height: 60px;
			padding: 8px;
			border: 1px solid #7a7a7a;
			border-radius: 4px;
			resize: none;
			font-size: 14px;
			box-sizing: border-box;
			margin-top: 5px;
		}

		.orderXx_btn {
			font-size: 14px;
			padding: 2px 10px;
			background-color: #5dbeff;
			color: white;
			display: inline-block;
			border-radius: 4px;
		}

		.orderXx_btn_forbid {
			color: #5c5c5c;
			background-color: #d6d6d6;
		}

		.orderXx_btn:hover {
			cursor: pointer;
		}

		.orderXx_popup {
			position: fixed;
			left: 0px;
			top: 0px;
			width: 100%;
			height: 100%;
			z-index: 999999999;
			background-color: rgba(62, 62, 62, 0.5);
			display: flex;
			justify-content: center;
			align-items: center;
		}
		[v-if] {
			display: none;
		}
/* 		
		.v-select {
    width: 150px !important;
    display: inline-block;
    background: white;
  }
  .v-select .vs__dropdown-toggle {
    height: 33px !important;
    border: 1px solid #7a7a7a;
  } */
	</style>
</head>

<body>
	<div id="vue-root">
		<a href="warning_reminder_item.html" style="color: white">
			<div class="add">预警设置</div>
		</a>
		<select class="search1" v-model="search.schoolId">
			<option :value="undefined">请选择校区</option>
			<option v-for="school in schools" :key="school.id" :value="school.id" v-text="school.name">
			</option>
		</select>
		<input placeholder="请输入学员姓名" class="search1" v-model="search.name" style="height: 33px;">

		<v-select
 
  v-model="search.people"
  :options="peoples"
  label="name"
  :reduce="people => people.id"
  placeholder="请选择跟进人"
  :filterable="true"
  :clearable="true"
  style="width: 150px; display: inline-block;"
></v-select>
		<!-- <select class="search1" v-model="search.people">
			<option :value="undefined">请选择跟进人</option>
			<option v-for="people in peoples" :key="people.id" :value="people.id" v-text="people.name">
			</option>
		  </select> -->
		<select class="search1" v-model="search.renewalStatus">
			<option :value="undefined">请选择状态</option>
			<option value="1">待续费</option>
			<option value="2">已续费</option>
			<option value="3">不续费</option>
		</select>

		<input placeholder="课程结束起" class="search1" id="startTime" v-model="search.startTime" />
		<input placeholder="课程结束止" class="search1" id="endTime" v-model="search.endTime" />
		<img src="../image/search.png" height="35" width="35" alt="" class="search_img1" @click="getData0">
		<div class="table">
			<table class="table_top">
				<thead>
					<tr>
						<th>
							<input type="checkbox" class="check-box" v-model="all">序号
						</th>
						<th>学员姓名</th>
						<th>学员手机号</th>
						<th>分配校区</th>
						<th>报读课程</th>
						<th>报读模式</th>
						<th>跟进人</th>
						<th>购买数量</th>
						<th>已消耗数量</th>
						<th>剩余数量</th>
						<th>金额</th>
						<th>课程有效期</th>
						<th>状态</th>
						<th>原因</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="list">
					<tr v-for="(student,index) in list" :key="student.id">
						<td>
							<input type="checkbox" class="check-box" v-model="student.checked">
							<span v-text="index+1"></span>
						</td>
						<td v-text="student.studentName"></td>
						<td v-text="student.bindCode"></td>
						<td v-text="student.schoolName"></td>
						<td v-text="student.courseName"></td>
						<td>
							<span v-if="student.courseType === 1">按课时收费</span>
							<span v-else-if="student.courseType === 2">按月收费</span>
							<span v-else-if="student.courseType === 3">按天收费</span>
							<span v-else-if="student.courseType === 4">按季收费</span>
							<span v-else-if="student.courseType === 5">按期收费</span>
							<span v-else-if="student.courseType === 6">按课包收费</span>
							<span v-else-if="student.courseType === 7">按体验收费</span>
						</td>
						<td v-text="student.peopleName"></td>
						<td v-text="student.countNum"></td>
						<td v-text="student.xiaoNum"></td>
						<td v-text="student.number"></td>

						<td v-text="student.amount/100"></td>
						<td v-text="(student.startTime+' ~ '+student.endTime)"></td>
						<!-- <td>
							<span v-if="student.courseStatus === 2">已续费</span>
							<span v-else-if="student.courseStatus === 3">
							  不续费
							  <span style="text-decoration: underline; margin-left: 5px;" @click="showAuditReason(student)">
								查看原因
							  </span>
							</span>
							<span v-else>待续费</span>
						  </td> -->
						  <td>
							<span v-if="student.courseStatus === 2">已续费</span>
							<span v-else-if="student.courseStatus === 3">不续费</span>
							<span v-else>待续费</span>
						  </td>
						  <td>
							<span v-if="student.courseStatus === 3 && student.withdrawalNotes" style="color: #f56c6c;">
							  {{ student.withdrawalNotes }}
							</span>
							<span v-else>-</span>
						  </td>
						<td>
							<div class="orderXx_btn" @click="openCheckPopup(student)" v-if="able.edit">状态修改</div>
							
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="delete" @click="batchDelete" v-if="able.del&&total>1">批量删除</div>
		<ul class="pagination" v-if="pages>1">
			<li>
				<a v-if="pageNum!=1" @click="pageNum=1">«</a>
				<a class="pages-jump" v-if="pageNum!=1" @click="pageNum--">‹</a>
				<a v-text="pageNum"></a>
				<a class="pages-jump" v-if="pageNum!=pages" @click="pageNum++">›</a>
				<a v-if="pageNum!=pages" @click="pageNum=pages">»</a>
			</li>
		</ul>
		<div style="float: right;">
			总共{{total}}条记录
			<select class="ui-select init" style="height:32px" v-model="pageSize">
				<option :value="10">每页10条</option>
				<option :value="30">每页30条</option>
				<option :value="100">每页100条</option>
			</select>
		</div>

		<div v-if="showReasonPopup" class="orderXx_popup" @click="closeReasonPopup">
			<div class="popup_box" @click.stop>
				<div class="popup_box_title">不续费原因</div>
				<div class="popup_box_content" style="padding: 20px; font-size: 16px;">
					{{ selectedAuditReason || '无原因' }}
				</div>
				<div class="popup_box_btn_box">
					<div class="orderXx_btn popup_box_btn" @click="closeReasonPopup">关闭</div>
				</div>
			</div>
		</div>

		<div class="orderXx_popup" v-if="isshowCheck" @click="isshowCheck=false">
			<div class="popup_box" @click.stop>
				<div class="popup_box_title">状态修改</div>
				<div class="popup_box_content">
					<div class="popup_box_check">
						<span>状态选择：</span>
						<div class="checkRadio">
							<input type="radio" name="sex" :value="2" title="已续费" v-model="checkType">
							<span>已续费</span>
							<input type="radio" name="sex" :value="3" title="不续费" style="margin-left: 20px;"
								v-model="checkType">
							<span>不续费</span>
						</div>

					</div>
					<!-- 拒绝原因输入框 -->
					<div v-if="checkType === 3" class="popup_box_reject_reason">
						<span>不续费原因：</span>
						<textarea v-model="auditReason" placeholder="请填写不续费原因" rows="3" style="width: 100%;"></textarea>
					</div>
				</div>
				<div class="popup_box_btn_box">
					<div class="orderXx_btn popup_box_btn popup_box_btn2" @click="isshowCheck=false">取消</div>
					<div class="orderXx_btn popup_box_btn" v-if="oneOrder.status==1" @click="isshowCheck=false">关闭
					</div>
					<div class="orderXx_btn popup_box_btn" v-else @click="submitCheck()">提交</div>
				</div>
			</div>
		</div>
	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/vue-select.min.js"></script>
	<script src="/lib/laydate/laydate.js"></script>
	<script src="/js/common.js"></script>
	<script src="/js/list.js"></script>
	<script src="/js/auth_util.js"></script>

	<script>
		Vue.component('v-select', VueSelect.VueSelect);
		var agentId = top_params().id;
		var app = new Vue(merge({
	
			data: {
				urls: {
					del: '/pc/room/del',
					list: '/pc/student/studentWarning1?agentId=' + top_params().id
				},
				courses: [],
				peoples: [],
				schools: [],
				showReasonPopup: false,
				selectedAuditReason: '',
				checkType: 2,
				isshowCheck: false,
				auditReason: '',
				oneOrder: '',
			},
			created() {
				abled('renewals', this);
				this.getData();
				axios.get('/pc/course/all/' + agentId).then(function (res) {
					this.courses = res.data
				}.bind(this));
				axios.get('/pc/staffUser/all/' + agentId).then(function (res) {

					this.peoples = res.data;
				}.bind(this));
				axios.get('/pc/school/all/' + agentId).then(function (res) {
					this.schools = res.data;
				}.bind(this));


			},
			methods: {
				openCheckPopup(item) {
					this.oneOrder = item
					this.checkType = item.courseStatus
					this.isshowCheck = true
					console.log(this.oneOrder);
				},
				showAuditReason(student) {
					this.selectedAuditReason = student.withdrawalNotes || '暂无原因';
					this.showReasonPopup = true;
				},
				closeReasonPopup() {
					this.showReasonPopup = false;
					this.selectedAuditReason = '';
				},
				submitCheck() {
					var requestData = {
						id: this.oneOrder.id,
						courseStatus: this.checkType
					};
					if (this.checkType === 3) {
						requestData.withdrawalNotes = this.auditReason;
					}
					axios.put('/pc/student/upCourseStatus', requestData).then((res) => {
						alert('保存成功！'); 
						this.getData();
						this.isshowCheck = false;
						this.oneOrder = '';
						this.auditReason = '';

					});
				}
			},
		}));
		["startTime", "endTime"].forEach(function (it) {
			laydate.render({
				elem: "#" + it,
				type: "date",
				done: function (value, date, endDate) {
					app.search[it] = value;
				},
			});
		});
	</script>
</body>

</html>